<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>menu</title>
  <style>
    .div_all{
      display: flex;
      flex-direction: column;
    }
    .div_top{

    }
    .ru{
      height: 35px;
      width: 95%;
      background-color: rgb(242, 242, 242);
      display: flex;
      flex-direction: row;
      align-items: center;
      border: 1px solid #808080;
    }
    .div_xia{

      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .div_uxia{
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .div_table{
      border: 1px solid #808080;
      width: 95%;
      border-top: 0px none ;
      display: flex;
      justify-content: center;

    }
    .submit{

      width: 90px;
      height: 30px;
      border-radius: 10px;
      border: 0px none;
      background-color: #7efc03;
    }
  </style>
</head>
<body>
<div class="div_all">
  <div class="div_top">
    <span style="font-size: 35px; margin-left:2.5% ;">货物出库</span>
  </div>
  <div>
    <div class="div_xia">
              <span class="ru">
                  <img src="images/customer/u149.png" width="25px" height="25px">
                  <a style="font-size: 20px; margin-left: 2%;">出库</a>
              </span>
      <div class="div_table">
        <form action="outinventory">
          <table >
            <tr style="margin-top: 20px;">
              <td style=" width: 100px; height: 50px;" align="center">供应商</td>
              <td>
                <input type="text" id="supplier" name="out_supplier">
              </td>
              <td>
                <span id="sp1"></span>
              </td>
              <td></td>
            </tr>
            <tr style="margin-top: 20px;">
              <td style=" width: 100px; height: 50px;" align="center">送货人姓名</td>
              <td>
                <input type="text" id="name" name="out_name">
              </td>
              <td>
                <span id="sp2"></span>
              </td>
              <td></td>
            </tr>
            <tr>
              <td style=" width: 100px; height: 50px;" align="center">货物名</td>
              <td>
                <input type="text" name="out_goodname" id="goodname">
              </td>
              <td> <span id="sp3"></span></td>
              <td>
              </td>
            </tr>
            </tr>
            <tr>
              <td style=" width: 100px; height: 50px;" align="center">货物类型</td>
              <td>
                <input type="text" name="out_goodtype" id="goodtype">
              </td>
              <td> <span id="sp4"></span></td>
              <td>
              </td>
            </tr>
            <tr>
              <td style=" width: 100px; height: 50px;" align="center">入库数量</td>
              <td>
                <input type="text" name="out_quantity" id="quantity">
              </td>
              <td> <span id="sp5"></span></td>
              <td>


              </td>
            </tr>
            <tr>
              <td style=" width: 100px; height: 50px;" align="center">送货人电话号码</td>
              <td>
                <input type="text" name="out_usertel" id="usertel">
              </td>
              <td><span id="sp6"></span></td>
              <td>
              </td>
            </tr>
            <tr>
              <td style=" width: 100px; height: 50px;" align="center">送货人地址</td>
              <td>
                <input type="text" name="out_address" id="address">
              </td>
              <td><span id="sp7"></span></td>
              <td>
              </td>
            </tr>
            <tr>
              <td style=" width: 100px; height: 50px;" align="center">货物价格</td>
              <td>
                <input type="text" name="out_goodprice" id="goodprice">
              </td>
              <td><span id="sp8"></span></td>
              <td>
              </td>
            </tr>
            <tr>
              <td style=" width: 100px; height: 50px;" align="center">仓库号</td>
              <td>
                <select name="out_warehouse">
                  <option value="1001">1001号仓库</option>
                  <option value="1002">1002号仓库</option>
                  <option value="1003">1003号仓库</option>
                </select>
              </td>
              <td>

              </td>
              <td></td>
            </tr>
            <tr>
              <td style=" width: 100px; height: 50px;" align="center"></td>
              <td></td>
              <td></td>
              <td>
                <input type="submit" value="提交仓库" class="submit" id="re" name="submit">
              </td>
            </tr>
          </table>
        </form>

      </div>
    </div>
  </div>
</div>
</body>
<script src="resources/scripts/jquery-3.2.1.min.js"></script>
<script>
  //判断供应商是否为空
  var falg=false;
  var falg1=false;
  var falg2=false;
  var falg3=false;
  var falg4=false;
  var falg5=false;
  var falg6=false;
  var fal7=false;
  $("#re").attr("disabled",true);
  $("#supplier").blur(function () {
    var supplier = $("#supplier").val();

    if (supplier==null||$.trim(supplier)==""){
      $("#sp1").html("请填写送货供应商名").css("color","red");
    }else{
      $("#sp1").html("输入正确").css("color","green");
      falg=true;
    }
    btncheck()
  })
  //----------------------------------------------------
  //判断送货人名否为空
  $("#name").blur(function () {
    var name = $("#name").val();
    if (name==null||$.trim(name)==""){
      $("#sp2").html("请填写送货人名").css("color","red");
    }else{
      $("#sp2").html("输入完成").css("color","green");
      falg1=true;
    }
    btncheck()
  })
  //------------------------------------------------------
  //判断确认货物名是否为空
  $("#goodname").blur(function () {
    var goodname = $("#goodname").val();
    if (goodname==null||$.trim(goodname)==""){
      $("#sp3").html("请填写货物名").css("color","red");
    }else{
      $("#sp3").html("输入完成").css("color","green");
      falg2=true;
    }
    btncheck()
  })
  //------------------------------------------------------
  //判断确认货物类型是否为空
  $("#goodtype").blur(function () {
    var goodtype = $("#goodtype").val();
    if (goodtype==null||$.trim(goodtype)==""){
      $("#sp4").html("请填写货物类型").css("color","red");
    }else{
      $("#sp4").html("输入完成").css("color","green");
      falg3=true;
    }
    btncheck()
  })
  //------------------------------------------------------
  //判断确入库数量是否为空
  $("#quantity").blur(function () {
    var quantity = $("#quantity").val();
    if (quantity==null||$.trim(quantity)==""){
      $("#sp5").html("请填写数量").css("color","red");
    }else{
      $("#sp5").html("输入完成").css("color","green");
      falg4=true;
    }
    btncheck()
  })
  //------------------------------------------------------
  //判断确入送货人的电话号码否为空
  $("#usertel").blur(function () {
    var usertel = $("#usertel").val();
    if (usertel==null||$.trim(usertel)==""){
      $("#sp6").html("请填写送货人的电话号码").css("color","red");
    }else{
      $("#sp6").html("输入完成").css("color","green");
      falg5=true;
    }
    btncheck()
  })
  //------------------------------------------------------
  //判断确入送货人的地址否为空
  $("#address").blur(function () {
    var address = $("#address").val();
    if (address==null||$.trim(address)==""){
      $("#sp7").html("请填写收货人的地址").css("color","red");
    }else{
      $("#sp7").html("输入完成").css("color","green");
      falg6=true;
    }
    btncheck()
  })

  //----------------------------------------------------------------------------
  //判断货物价格是否为空
  $("#goodprice").blur(function () {
    var goodprice = $("#goodprice").val();
    if (goodprice==null||$.trim(goodprice)==""){
      $("#sp8").html("请填写货物价格").css("color","red");
    }else{
      $("#sp8").html("输入完成").css("color","green");
      falg7=true;
    }
    btncheck()
  })

  //---------------------------------------------
  //隐藏按钮
  function btncheck(){
    if (falg==true&&falg1==true&&falg2==true&&falg3==true&&falg4==true&&falg5==true&&falg6==true&&falg7==true){
      $("#re").attr("disabled",false);
    }else{
      $("#re").attr("disabled",true);
    }
  }
  //-------------------------------------------------
  //点击后输入完成
  $("#re").click(function (){
    alert("出库完成")
  })
</script>
</html>